<template>
  <view style="padding:30rpx;">
    <uv-subsection :list="list" :current="current" @change="change" mode="subsection"></uv-subsection>
  </view>
  <view class="list">
    <z-paging ref="paging" v-model="listData.list" @query="queryList" show-refresher-when-reload
              use-page-scroll v-if="userToken.token">
      <scroll-view v-for="(item,pki) in listData.list" :key="item.wid" @click="goView(item.wid)">
        <view class="content">
          <image :src="`/static/icon/biaozhi${item.status}.png`" class="status" mode="widthFix"></image>
          <view :class="['List-item',pki==0?'first':'']">
            <view class="title" style="display: flex">
              <view class="titleText">{{ item.title }} <text class="font" style="color:red" v-if="item.status==1">(审核中)</text></view>
            </view>
            <view class="desc" v-html="item.content"></view>
            <view class="album" v-if="item.image?.length>0">
              <uv-album :urls="item.image" singleMode="widthFix" keyName="temp" :rowCount="3"
                        multipleSize="80" maxCount="3"></uv-album>
            </view>
            <view class="footer uni-row">
              <view class="type uni-row" style="align-items: center">
                <text class="t" style="font-size:14px;">{{ item.type }}</text>
              </view>
              <view class="time uni-row" style="align-items: center">
                <text class="t" style="font-size:14px">{{ item.create_time }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </z-paging>
    <view v-else style="padding:30rpx;">
      <uv-empty mode="page" :icon="emptyPng" width="128" height="128" text="你还未登录"></uv-empty>
      <view style="margin-top:80rpx;">
        <uv-button type="primary" :plain="true" text="立即登录" icon="account"
                   icon-color="#3c9cff" size="normal" @click="goLogin"></uv-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref,reactive} from "vue"
import {onPageScroll} from '@dcloudio/uni-app'
import {getMyThread} from '@/common/user'
import emptyPng from "@/static/icon/emptyData.png"
import {
  useToken
} from "@/stores/userStores";
const userToken = useToken();
import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
import View from "@/pages/thread/view.vue";
const paging = ref(null);
useZPaging(paging)
const listData = reactive({})

const list = ref([
  {
    name: '待处理',
    value: 0
  },
  {
    name: '已受理',
    value: 1
  },
  {
    name: '已办结',
    value: 2
  }, {
    name: '审核中',
    value: 3
  },
])
const current = ref(0)
const change = (index) => {
  current.value = index
  paging.value.reload();
}
const goView = (wid) => {
  uni.navigateTo({
    url: `/pages/thread/view?wid=${wid}`
  })
}
const queryList = (pageNo, pageSize) => {
  const params = {
    page: pageNo,
    checkStatus: current.value,
    type: 0,
    classifyAry: '',
    filterStatusValue: 0
  }
  getMyThread(params).then(r => {
    //将content中的[查看原文]替换
    r.data.data.map(item => {
      //去掉type的\r\n
      item.type = item.type.replace(/[\r\n\s]+$/, '')
      item.content = item.content.replace('...[查看原文]', '<span  style="color:rgb(95, 177, 250)">...[查看原文]</span>')
    })
    paging.value.complete(r.data.data);
  })
}
</script>


<style scoped lang="scss">
.content {
  padding: 0 30rpx;
  position: relative;

  .status {
    position: absolute;
    right: 40rpx;
    top: 20rpx;
    z-index: 10;
    width: 160rpx;
    transform: rotate(40deg);
    opacity: .6;
  }

  .List-item {
    background-color: #fff;
    margin-top: 30rpx;
    border: 14px;
    padding: 0 30rpx 30rpx 40rpx;
    &.first{
      margin-top: 0;
    }
  }

  .title {
    border-bottom: 1px solid #eee;
    padding: 30rpx 0 15rpx 0;
    display: flex;
    flex-direction: column;

    .titleText {
      font-size: 18px;
      line-height: 25px;
    }

    .font {
      margin-right: 2px;
    }
  }

  .album {
    margin-top: 20rpx;
  }

  .desc {
    //只显示2行
    overflow: hidden;
    text-overflow: ellipsis;
    //display: -webkit-box;
    //-webkit-line-clamp: 2;
    //-webkit-box-orient: vertical;
    font-size: 30rpx;
    color: #333;
    line-height: 45rpx;
    margin-top: 15rpx;
  }

  .thumb {
    margin-top: 10px;
  }

  .footer {
    width: 100%;
    justify-content: space-between;
    display: flex;
    margin-top: 30rpx;

    .type,
    .time {
      display: flex;

      > .font,
      .t {
        color: $defindCur;
        font-size: 26rpx;
      }
    }
  }

}
</style>
